<script lang='ts' setup>
import { useSafeAreaHooks } from '@/composables/useSafeArea'

const { top, bottom } = useSafeAreaHooks()

const getCustomStyle = computed(() => (`padding-top: ${top}px;padding-bottom: ${bottom}px;`))
const getContentStyle = computed(() => ({ height: `calc(100vh - ${top}px - ${bottom}px)` }))
</script>

<template>
  <view
    class="page-layout-safe_area"
    :style="getCustomStyle"
  >
    <view
      class="content"
      :style="getContentStyle"
    >
      <slot />
    </view>
  </view>
</template>

<style scoped lang="less">
.page-layout-safe_area {
  height: calc(100vh);
  box-sizing: border-box;
  overflow: hidden;

  .content {
    overflow: hidden;
  }
}
</style>
